

$(function(){
  // 页面全部数据
  let Datas = [];
  // 滚动回弹效果
  let leftScroll = null;

  // 初始化
  init();

  // 初始化
  function init(){

    // 设置字体大小
    setHTML();

    // 复用缓存，刷新页面
    useCache();
  
    // 绑定事件
    bindEventList();
  }

  /**
   * 复用缓存
   */
  function useCache(){
    let cateList = getLocalStorage("cate_list");
    let timeout = 1000*60;//60s
    if(Date.now() - cateList.setTime > timeout){
      // 获取列表数据
      getCateData(); 
    }else{
      // 将数据保存给全局变量
      Datas = cateList.datas;
      // 渲染左边列表
      renderLeft();
      // 渲染右边列表
      let idx = 0;// 第0项数据
      renderRight(idx);
    }
  }

  // 绑定事件
  function bindEventList(){
    bindLeftTap();
  }
  
  /**
   * 获取分类列表数据
   */
  function getCateData(){
    let url = 'categories';
    $.get(url, (res)=> {
        console.log(res);
        if(res.meta.status === 200){
          // 给全局变量
          Datas = res.data;

          // 将数据缓存起来 k, v
          setLocalStorage("cate_list", Datas);
          
          // 左边
          renderLeft();
          // 右边
          let idx = 0;// 第0项数据
          renderRight(idx);
        }
      }
    );
  }


  /**
   * 缓存分类列表数据
   * @param {*} datas 
   */
  function setLocalStorage(key,value){
    let obj = {
      datas: value,
      setTime: Date.now(),
    };
    localStorage.setItem(key, JSON.stringify(obj));
  }

  /**
   * 获取本地缓存
   * @param {*} key 
   * @return {*} obj
   */
  function getLocalStorage(key){
    return JSON.parse(localStorage.getItem(key));
  }


  /**
   * 渲染左边列表
   * @param {*} res 
   */
  function renderLeft(){
    let leftData = Datas;
    // 左边列表
    let leftArr = leftData.map((v, i)=>{
      return `<li class="${i===0?'tap':''}">${v.cat_name}</li>`
    });
    $('.left_wrap').html(leftArr.join(' '));

    // iscroll滚动
    leftScroll = new IScroll('.left');
  }

  /**
   * 渲染右边
   * @param {*} res 
   */
  function renderRight(idx){
    let rightData = Datas[idx]['children'];
    // console.log(rightData);
    let html = template('rightTpl', {arr: rightData});
    $('.right_container').html(html);

    // 右边的滚动，需要图片加载完毕之后才能初始化，否则高度会有差异
    let imgLength = $('.right_container img').length;
    $('.right_container img').on('load', function(){
      imgLength--;
      // 最后一张图片加载完成之后
      if(imgLength === 0){
        let rightScroll = new IScroll('.right');
      }
      
    })
    

  }

  /**
   * 左边列表点击事件
   */
  function bindLeftTap(){
    $('.left_wrap').on('tap', 'li', function(){
      $(this).addClass('tap').siblings().removeClass('tap');

      // 将当前点击元素滚动到中间  true true
      // leftScroll.scrollToElement(el, time, offsetX, offsetY, easing)
      leftScroll.scrollToElement(this, 500, true, true)

      let index = $(this).index();
      // 传入index
      renderRight(index);

    });
  }


  /**
   * 根据屏幕大小动态设置html字体大小
   */
  function setHTML() {
    // 基础值
    var baseVal = 100;
    // 设计稿的宽度
    var pageWidth = 375;
    // 要适配的屏幕的宽度?
    var screenWidth = document.querySelector("html").offsetWidth;
    // 要设置的fontsize
    var fontsize = screenWidth * baseVal / pageWidth;
    // 设置到html标签的中
    document.querySelector("html").style.fontSize = fontsize + "px";
  }
})